<template>
    <el-popover
            placement="bottom-start"
            :width="400"
            v-model:visible="vaPopoverVisible"
    >
        <template #reference>

            <el-input
                    placeholder="选择图标"
                    v-model="option"
                    :prefix-icon="option"
                    readonly/>

        </template>
        <div style="overflow:auto; height: 200px;">
            <va-button
                    @click="checked(item.value),action()"
                    class="iconSelect"
                    v-for="item in options"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                    :icon = "item.value"
                    size="medium"
            />
        </div>
    </el-popover>
</template>

<script>
    import {ref,watch} from 'vue'
    import { iconData } from "@/util/icon.json";
    import VaButton from "./Va-Button";
    export default {
        name: "Va-Popover",
        components: {VaButton},
        props:{
            keyData: {
                type: String,
                default: ''
            },
            action: {
                type: Function,
                default: () => {
                }
            },
            //用于接收v-model值 vue3.0 令名
            modelValue: {
                type:String,
                default: 'el-icon-plus'
            },
        },
        created(){
            if (!this.option) {
                this.option = 'el-icon-plus'
            }
        },
        setup(props,context){
            //时间戳，保证组件的刷新
            const timer = ref('')
            //选项值
            const option = ref(props.modelValue)

            //选项数据
            let options = ref(iconData)

            let loading = ref(false)
            let vaPopoverVisible = ref(false)

            //watch
            watch(() => props.keyData, (val) => {
                console.log(val)
            })

            //watch
            watch(() => props.modelValue, (val) => {
                //更新时间戳，刷新组件
                timer.value = new Date().getTime()

                options.value.forEach((item) =>{
                    if (item.value == val) {
                        option.value = item.value
                    }
                })
            })



            const checked =(value)=>{
                vaPopoverVisible.value=false
                context.emit("update:modelValue", value)
            }
            return{
                //data
                option,
                options,
                loading,
                vaPopoverVisible,
                timer,
                //fun
                checked
            }
        }
    }
</script>

<style lang="less" scoped>
    .menu-ul {
        width: 100%;
        text-align: center;

        li {
            line-height: 30px;
            height: 30px;
            border-radius: 4px;

            &:hover {
                background: #131432;
                color: #DCDFE6;
            }
        }
    }
    .iconSelect{
        margin: 0px;
        color: #C0C4CC;
        border: 1px solid #EBEEF5;
        padding: 2px;
        border-radius: 2px;
        box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
        text-align: center;

        &:hover{
            color: #131432;
            box-shadow: 0 2px 4px rgba(0,0,0,0.12),0 0 6px rgba(0,0,0,0.04);
        }
    }
</style>